<template>
    <el-row>
        <el-col>
            <el-form label-width="120px" :model="Device_details" ref="material_refs" :rules="rules">
                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="编号">
                            <el-input disabled v-model="Device_details.DeviceNumber" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="名称" prop="DeviceName">
                            <el-input v-model="Device_details.DeviceName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="一级分类" prop="DeviceCategoryIdOne">
                            <el-select v-model="Device_details.DeviceCategoryIdOne" style="width: 100%">
                                <el-option v-for="item in AllDeviceCategory" v-if="item.ParentId == 0" :value="item.Id" :label="item.DeviceCategoryName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="二级分类" prop="DeviceCategoryIdTwo">
                            <el-select v-model="Device_details.DeviceCategoryIdTwo"  style="width: 100%">
                                <el-option v-for="item in AllDeviceCategory" v-if="item.ParentId != 0" :value="item.Id" :label="item.DeviceCategoryName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="部门" prop="DepartmentId">
                            <el-select placeholder="请选择部门" v-model="Device_details.DepartmentId"  style="width: 100%">
                                <el-option v-for="v in AllDepartment" :value="v.Id" :label="v.DepartmentName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="单位" prop="Unit">
                            <el-input v-model="Device_details.Unit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="型号" prop="DeviceModel">
                            <el-input v-model="Device_details.DeviceModel"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="状态" prop="State">
                            <el-select v-model="Device_details.State" style="width: 100%">
                                <el-option v-for="v in AllDeviceState" :value="v.Type" :label="v.Name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="库存数量">
                            <el-input v-model="Device_details.StockAmount" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="最大数量">
                            <el-input v-model="Device_details.Amount" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="库存金额">
                            <el-input v-model="Device_details.StockPrice" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="最大金额">
                            <el-input v-model="Device_details.TotalPrice" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="单价">
                            <el-input v-model="Device_details.Price" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="创建日期">
                            <el-input v-model="Device_details.PurchaseDate" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="备注">
                            <el-input v-model="Device_details.PurchaseCause"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="图片上传">
                            <div class="imagediv">
                                <ImagesAssembly :imglist="imglist"></ImagesAssembly>
                            </div>
                            <upload-file ref="upload_file_refs" style="display: inline-block;margin-right: 10px;display: block" content="图片选择" list_type="picture-card"  btnsize=""
                                         :another-data="AnotherData"  :showfilelist="true"></upload-file>
<!--                            <el-image v-for="item in imglist_ZJ" :src="item.url" style="height: 100px;width:100px;padding: 0px 3px" :z-index="3000" :preview-src-list="imglist_ZJ"></el-image>-->
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="30">
                    <el-col :span="24" align="center">
                        <el-button type="success" @click="UpdateDeviceContent_event">修改</el-button>
                    </el-col>
                </el-row>

            </el-form>
        </el-col>
    </el-row>
</template>

<script>
    import UploadFile from "../UploadFile";
    import ImagesAssembly from "../ImagesAssembly";

    export default {
        name: "UpdataMaterial",
        components: {
            UploadFile, ImagesAssembly,
        },
        watch: {
            Device_details: function (val) {
                this.imglist_ZJ = []
                this.imageBind(val)
                this.AnotherData.id = val.Id
            },
        },
        created() {
            this.imglist_ZJ = []
            //图片绑定(只执行一次)
            this.imageBind(this.Device_details)
            this.AnotherData.id = this.Device_details.Id
        },
        props: {
            Device_details: {
                type: Object,
                required: true
            },
            AllDeviceCategory: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllDeviceState: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                //初始的文件数据
                imglist: [],
                //组件选择的文件
                imglist_ZJ: [],
                //文件上传参数
                AnotherData: {
                    FileType: 2048,
                    id: 0,
                    Type: 0,
                    Single: false,
                },
                //认证
                rules:{
                    DeviceName:[ { required: true, message: '请输入物资名称', trigger: 'blur' }],
                    DeviceCategoryIdOne:[  { required: true, message: '请选择一级分类', trigger: 'change' }],
                    DeviceCategoryIdTwo:[  { required: true, message: '请选择一级分类', trigger: 'change' }],
                    DepartmentId:[  { required: true, message: '请选择部门', trigger: 'change' }],
                    Unit:[ { required: true, message: '请输入物资单位', trigger: 'blur' } ],
                    DeviceModel:[ { required: true, message: '请输入物资单位', trigger: 'blur' } ],
                    State:[ { required: true, message: '请输入物资状态', trigger: 'change' } ],
                },
            }
        },
        methods: {
            //图片绑定
            imageBind(val) {
                if (val.imgUrl != null) {
                    this.imglist = []
                    val.imgUrl.forEach(item => {
                        this.imglist.push(item)
                        console.log(item)
                    })
                }
            },
            UpdateDeviceContent_event() {
                this.$refs['material_refs'].validate(vali=>{
                    if (vali){
                        let loadding = this.openLoading();
                        this.$http.post('Device/UpdateDeviceContent', this.Device_details).then(res => {
                            loadding.close();
                            if (res.data.msg.IsSuccess) {
                                this.imglist_ZJ = []
                                this.$message.success('修改成功!')
                                this.$parent.$parent.Device_details_dialog = false;
                                this.$parent.$parent.formdata()
                                if (this.$refs['upload_file_refs'].fileList.length > 0) {
                                    //文件上传
                                    this.$refs['upload_file_refs'].submitUpload()
                                }
                            } else {
                                this.$message.warning(res.data.msg.Msg)
                            }
                        }).catch(() => {
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    }
                })
            },
            //用于上传时页面的图片同步效果
            Addlistdata() {
                this.imglist_ZJ = this.$refs['upload_file_refs'].fileList
            },
            //重置列表
            zj_imagelist() {
                this.$refs['upload_file_refs'].clearfilelist()
            },
        },
    }
</script>

<style scoped>
    .imagediv{
        padding: 0px 3px;
    }
</style>
